<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>登录</title>
<script src="js/jquery-1.11.0.min.js" ></script>

<script>
var login = function(){
	var username=$("#username").val() 
	var password=$("#password").val() 
	if( username ===""){
		$("#msg").html("请输入登录名！")
		$("#username").focus()
		return
	}
	
	if( password ===""){
		$("#msg").html("输入密码！")
		$("#password").focus()
		return
	}
	$("#msg").html("")
	console.log("username:",username)
	console.log("password:",password)
	
	//提交表单，是整个页面全部刷新
	//$("#myform").submit()
	
	$.ajax({
	    url:'login',//请求的url。在html中的/，表示从域名后面开始
	    type:'post', //请求方式，GET或POST
	    data:{ //要提交给服务器的数据
	    	username : username,
	    	"password" : password
	    },
	    dataType:'json',//服务器返回数据的类型
	    success:function(data){//成功时执行该函数，data就是服务器返回的数据
	        console.log("服务器返回的数据是：",data)
	        //判断，登录成功后，跳转到首页 index.html
	        if(data.code==0){
	        	//跳转到 index.html 页面
	        	location.href="index.html";
	        }else{
	        	//登录失败
	        	$("#msg").html(data.msg)//向id是msg的标签，显示文字
	        }
	    },
	    error:function(xhr,textStatus){//错误时执行该函数
	        console.log('错误')
	        console.log(xhr)
	        console.log(textStatus)
	    }
	})
}

</script>
	</head>
	<body>
	
登录 <br>
	用户名：<input name="username" id="username" placeholder="请输入用户名"> <br>
	密码：<input name="password" id="password" placeholder="请输入密码" type="password"><br>
	
	<input type="button" value="登录" onclick='login()'>
	如果 type是submit，会直接提交表单，不执行这个函数（在不同的浏览器，显示顺序不同）
	<div id="msg" style="color:red;"></div>

	</body>
</html>